<template>
    <div>
        <Form ref="formInline" :model="formInline" inline>
            <FormItem prop="输入部门名称">
                <Input type="text" v-model="formInline.department_name" placeholder="输入部门名称">
                </Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="search()">搜索</Button>
            </FormItem>
        </Form>
        <vxe-table
                border
                show-overflow
                :tooltip-config="{theme:'light',enterable:true}"
                resizable
                highlight-hover-row
                size="medium"
                align="center"
                header-align="center"
                :data="tableData">
            <vxe-table-column type="seq"  title="序号列"></vxe-table-column>
            <vxe-table-column field="department_name" title="单位"></vxe-table-column>
            <vxe-table-column field="responsibility_list_copy" title="行权业务清单"></vxe-table-column>
            <vxe-table-column field="special_funds_copy" title="项目资金清单"></vxe-table-column>
            <vxe-table-column field="operation_flow_copy" title="主要业务流程图"></vxe-table-column>
            <vxe-table-column field="information_systems_copy" title="信息系统清单"></vxe-table-column>
            <vxe-table-column title="操作" width="100" fixed="right" show-overflow>
                <template v-slot="{ row }">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">查看</Button>
                </template>
            </vxe-table-column>
        </vxe-table>
        <div class="ivu-alert ivu-alert-info">
                <span class="ivu-alert-message">
                     <label><b>提示</b></label>
                     如果想要查看文件或下载文件，请点击查看按钮
                </span>
        </div>
        <Row type="flex" justify="end" class="pg">
            <Page :total="params.totalRecord" show-sizer :page-size="params.pageSize"
                  show-total @on-change="pageAction" @on-page-size-change="pSizeChange" />
        </Row>
    </div>
</template>

<script>
import { operationList } from '@/api/user'
export default {

  name: 'test',

  data () {
    return {
      formInline: {
        department_name: ''
      },
      tableData: [],
      params: { pageNo: 1, pageSize: 10, totalRecord: 0 },
      ld: []
    }
  },

  props: {

  },

  components: {

  },

  computed: {

  },

  methods: {
    async init () {
      operationList().then(ret => {
        if (ret.data.errcode === 0) {
          // this.init()
          // this.tableData = this.$common.xeUtils.clone(ret.data.data.results)
          this.tableData = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          this.tableData.forEach(item => {
            console.log(item, '!!!!!!!!!!!')
            item.responsibility_list_copy = item.responsibility_list.split(',').length - 1
            item.special_funds_copy = item.special_funds.split(',').length - 1
            item.operation_flow_copy = item.operation_flow.split(',').length - 1
            item.information_systems_copy = item.information_systems.split(',').length - 1
          })
        } else {
          this.$Notice.error({ title: ret.data.errmsg, desc: '' })
        }
      })
    },
    pageAction (current) {
      operationList({ pageNo: current }).then(ret => {
        this.tableData = ret.data.data.results
        this.params.totalRecord = ret.data.data.totalRecord
        this.tableData.forEach(item => {
          console.log(item, '!!!!!!!!!!!')
          item.responsibility_list_copy = item.responsibility_list.split(',').length - 1
          item.special_funds_copy = item.special_funds.split(',').length - 1
          item.operation_flow_copy = item.operation_flow.split(',').length - 1
          item.information_systems_copy = item.information_systems.split(',').length - 1
        })
      })
    },
    pSizeChange (val) {
      operationList({ pageSize: val }).then(ret => {
        this.tableData = ret.data.data.results
        this.params.totalRecord = ret.data.data.totalRecord
        this.tableData.forEach(item => {
          console.log(item, '!!!!!!!!!!!')
          item.responsibility_list_copy = item.responsibility_list.split(',').length - 1
          item.special_funds_copy = item.special_funds.split(',').length - 1
          item.operation_flow_copy = item.operation_flow.split(',').length - 1
          item.information_systems_copy = item.information_systems.split(',').length - 1
        })
      })
    },
    search () {
      operationList({ department_name: this.formInline.department_name }).then(ret => {
        this.tableData = ret.data.data.results
        this.params.totalRecord = ret.data.data.totalRecord
        this.tableData.forEach(item => {
          console.log(item, '!!!!!!!!!!!')
          item.responsibility_list_copy = item.responsibility_list.split(',').length - 1
          item.special_funds_copy = item.special_funds.split(',').length - 1
          item.operation_flow_copy = item.operation_flow.split(',').length - 1
          item.information_systems_copy = item.information_systems.split(',').length - 1
        })
      })
    },
    // editEvent (row) {
    //   this.$router.push({
    //     name: 'operationFlowf',
    //     params: { aa: row }
    //   })
    // },
    edit (row) {
      // this.$router.push({
      //   name: 'operationFlowf',
      //   params: { aa: row }
      // })
      // console.log(row, 'row!!!!!!!!!!!1')
      // console.log(index, 'index!!!!!!!!!!!1')
      operationList().then(ret => {
        if (ret.data.errcode === 0) {
          // this.init()
          this.tableData = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          // this.ld = this.tableData[index]
          console.log('ss', this.tableData)
          this.$router.push({
            name: 'operationFlowf',
            params: { aa: row }
          })
        } else {
          this.$Notice.error({ title: ret.data.errmsg, desc: '' })
        }
      })
    },
    remove (index) {
      // this.data6.splice(index, 1)
    },
    asyncOK () {
      setTimeout(() => {
        this.modal6 = false
      }, 1000)
    }
  },

  watch: {

  },

  mounted () {
    this.init()
    this.init(this.pageObj)
  }

}
</script>

<style scoped>
.pg{
    margin-top: 20px;
}
.ivu-alert-info {
    border: 1px solid gainsboro;
    background-color: white;
}
.ivu-alert-infol {
    border: 1px solid gainsboro;
    background-color: white;
    text-align: center;
}
.ivu-alert {
    position: relative;
    padding: 8px 48px 8px 16px;
    border-radius: 4px;
    color: #515a6e;
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 10px;
    margin-top: 20px;
}
</style>
